<template>
    <div style="margin-top: 50px">
        <el-form :model="value" :rules="rules" ref="productInfoForm" label-width="120px" style="width: 600px" size="small">
            <el-form-item label="商品分类：" prop="categoryId">
                <el-cascader
                        v-model="value.categoryId"
                        :options="options"
                        :props="{ expandTrigger: 'hover' }"
                        @change="handleChange"></el-cascader>
            </el-form-item>
            <el-form-item label="商品名称：" prop="name">
                <el-input v-model="value.name"></el-input>
            </el-form-item>
            <el-form-item label="副标题：" prop="subtitle">
                <el-input v-model="value.subtitle"></el-input>
            </el-form-item>

            <el-form-item label="商品介绍：" prop="detail">
                <el-input
                        autoSize="true"
                        v-model="value.detail"
                        type="textarea"
                        placeholder="请输入内容"></el-input>
            </el-form-item>
            <el-form-item label="商品进价：" prop="initialPrice">
                <el-input v-model="value.packageList"></el-input>
            </el-form-item>
            <el-form-item label="商品售价：" prop="price">
                <el-input v-model="value.price"></el-input>
            </el-form-item>
            <el-form-item label="商品库存：" prop="stock">
                <el-input v-model="value.stock"></el-input>
            </el-form-item>
            <el-form-item label="新品:"  prop="newStatus">
                <el-tooltip content="设为新品" placement="top">
                    <el-switch
                            v-model="value.newStatus"
                            @change="changeNew()">
                    </el-switch>
                </el-tooltip>
            </el-form-item>

            <el-form-item label="" ></el-form-item>
            <el-form-item label="" ></el-form-item>
            <el-form-item label="" ></el-form-item>
            <el-form-item label="" ></el-form-item>
            <el-form-item label="" ></el-form-item>
            <el-form-item style="text-align: center">
                <el-button type="primary" size="medium" @click="handleNext()">下一步，填写商品属性</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
    export default {
        name: "ProductInfoDetail",
        props: {
            value: Object,
        },
        data(){
            return{
                value1:true,
                values:[],
                options: [],
               // newStatus:true,
                rules: {
                    name: [
                        {required: true, message: '请输入商品名称', trigger: 'blur'},
                        {min: 2, max: 140, message: '长度在 2 到 140 个字符', trigger: 'blur'}
                    ],
                    subtitle: [{required: true, message: '请输入商品副标题', trigger: 'blur'}],
                    productCategoryId: [{required: true, message: '请选择商品分类', trigger: 'blur'}],
                    detail: [{required: true, message: '请输入商品介绍', trigger: 'blur'}],
                    price: [{required: true, message: '请输入商品售价', trigger: 'blur'}],
                    stock: [{required: true, message: '请输入商品sku库存', trigger: 'blur'}],
                   // initialPrice:  [{required: true, message: '请输入商品进价', trigger: 'blur'}],
                }
            }
        },
        created(){
            this.getProductCateList();
        },
        methods:{
            getProductCateList(){
                this.service.get("/product/manage/category/0").then(res=>{
                    //console.log(res)
                    if (res.data.status == 0) {
                        for (let i =0;i<res.data.data.list.length;i++){
                            //console.log(111)
                            let category={
                                value:'',
                                label:'',
                                children:[]
                            };

                            category.value=res.data.data.list[i].id.toString();
                            category.label=res.data.data.list[i].name;
                            this.service.get("/product/manage/category/"+res.data.data.list[i].id).then(resp=>{
                               //console.log(resp.data.data);
                                for (let j=0;j< resp.data.data.list.length;j++){
                                    let childcate={
                                        value:'',
                                        label:''
                                    };
                                    childcate.value=resp.data.data.list[j].id.toString();
                                    // console.log(childcate.value);
                                    childcate.label=resp.data.data.list[j].name;
                                    // console.log(childcate.label);
                                    category.children.push(childcate)
                                }
                            });
                            this.options.push(category);

                            //console.log(this.options)
                        }
                    }
                })
            },
            //输出商品类别
            handleChange(value) {
                //console.log(value);
                this.value.categoryId=value[1]
            },
            changeNew(){
                this.value.newStatus=!this.value.newStatus;
                //console.log(this.value.newStatus);
                if (this.value.newStatus==false){
                    this.value.isNew=0;
                }
                if (this.value.newStatus==true){
                    this.value.isNew=1;
                }
            },

            handleNext(){
                this.$emit('nextStep');
            }
        },
    }
</script>

<style scoped>

</style>